<template>
    <div >
        <el-form ref="authLoginForm" :model="loginFormData" :label-width="formLabelWidth" :rules="rules" hide-required-asterisk label-position="left">
          <el-form-item label="手机号" :error="joinToString(loginFormErrors.mobile||'')"
                        prop="mobile">
            <el-input v-model="loginFormData.mobile" autocomplete="off" autofocus></el-input>
          </el-form-item>
          <el-form-item label="手机验证码" :error="joinToString(loginFormErrors.code_mobile_val||'')"
                        prop="code_mobile_val">
            <input-captcha-sms :send-to="loginFormData.mobile"
                               tpl="captcha_mobile_login"
                               v-on:change="(code_id,code_val)=>{loginFormData.code_mobile_id=code_id;loginFormData.code_mobile_val=code_val;}"></input-captcha-sms>
          </el-form-item>


            <el-form-item label="" >

                <el-button type="primary" class="btn-block" @click="authLogin()">登 录</el-button>

            </el-form-item>

        </el-form>

    </div>


</template>

<script>
    import ApiAuth from '../services/api-auth'

    export default {
        components: {},
        props: {

            formLabelWidth: {
                type: String,
                default: '120px'
            },
            authGuard: {
                type: String,
                default: 'api'
            },
            dataGuardConfig: {
                type: Object,
                default: function () {
                    return {}
                }
            },
        },

        data() {
            return {
                guardConfig: {},
                loginFormData: {
                    account: '',
                    password: '',
                    remember: false,

                },
                loginFormErrors: {
                    account: '',
                    password: '',
                    remember: '',
                },


              rules: {
                mobile: [
                  {required: true, message: '请输入手机号', trigger: 'blur'},
                  {validator: LeValidator.validateMobile, trigger: 'blur'}
                ],

                }
            }
        },
        computed: {

        },
        async created() {
            let _this = this;
            if (!LeUtils.isEmpty(_this.dataGuardConfig)) {
                _this.guardConfig = _this.dataGuardConfig;
            } else {
                await ApiAuth.loadConfig(_this.authGuard).then(function (data) {
                    _this.guardConfig = data;
                })
            }



            LeUtils.listenKeyUp('enter', 'login', function () {
                _this.authLogin();
            })
        },
        beforeDestroy() {
            LeUtils.listenKeyUpRemove('enter', 'login');
        },
        mounted() {
            let _this = this

        },
        methods: {
            joinToString: function (obj, glue) {
                return LeUtils.joinToString(obj, glue)
            },

            authLogin: function () {
                let _this = this;
                _this.loginFormData.guard = _this.authGuard;
                //console.log(_this.loginFormData)

                _this.$refs.authLoginForm.validate((valid) => {
                    if (valid) {
                        ApiAuth.login('mobileLogin',_this.loginFormData)
                            .then(function ({user, token}) {
                                if (user) {
                                    _this.$message.success('登录成功');
                                    _this.user = user;
                                    _this.$emit('logined', user, token);
                                } else {
                                    _this.$message.error('登录失败');
                                }

                            })
                            .catch(function (error) {
                                _this.loginFormErrors = LeUtils.valueGet(error, 'response.data.errors', {});
                            })
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });

            },

        }
    }
</script>
